<template>
  <div class="user-container">
    <div class="user-left">
      <div class="header">个人账号</div>
      <div class="userinfo">
        <div class="avatar">
          <img class="img" src="@/assets/img/course.png" alt="">
          <img class="edit" src="@/assets/img/edit.png" width="24" height="24">
        </div>
        <div class="nickname">{{ userinfo.nickname || userinfo.username }}</div>
        <div class="email">{{ userinfo.email }}</div>
      </div>
    </div>
    <div class="user-right">
      <div class="topic">个人信息：</div>
      <el-form ref="form" :model="form">
        <div class="baseinfo">
          <el-form-item>
            <div class="info">
              <i class="el-icon-user-solid" />
              <span class="title">用户名</span><span>{{ userinfo.username }}</span>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="info">
              <i class="el-icon-edit" />
              <span class="title">昵称</span>
              <span v-if="!edit">{{ userinfo.nickname }}</span>
              <el-input v-else v-model="form.nickname" class="input" placeholder="请输入内容" />
            </div>
          </el-form-item>
          <el-form-item>
            <div class="info">
              <i class="el-icon-mobile-phone" />
              <span class="title">手机号码</span>
              <span v-if="!edit">{{ userinfo.phone }}</span>
              <el-input v-else v-model="form.phone" class="input" placeholder="请输入内容" />
            </div>
          </el-form-item>
          <el-form-item>
            <div class="info">
              <i class="el-icon-message" />
              <span class="title">邮箱</span>
              <span v-if="!edit">{{ userinfo.email }}</span>
              <el-input v-else v-model="form.email" class="input" placeholder="请输入内容" />
            </div>
          </el-form-item>
          <el-form-item>
            <div class="info">
              <i class="el-icon-s-custom" />
              <span class="title">用户身份</span><span>{{ userMap[userinfo.identify[0]] }}</span>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="info">
              <i class="el-icon-document" />
              <span class="title">个性签名</span>
              <span v-if="!edit">{{ userinfo.signature }}</span>
              <el-input v-else v-model="form.signature" class="input" placeholder="请输入内容" />
            </div>
          </el-form-item>
        </div>
      </el-form>
      <div class="btns">
        <el-button type="primary" size="mini" @click="modify">修改</el-button>
        <el-button type="primary" size="mini" @click="save">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { userMap } from '@/utils/dictionary'
export default {
  data() {
    return {
      userMap,
      userinfo: JSON.parse(localStorage.userinfo) || {},
      form: {
        nickname: '',
        phone: '',
        email: '',
        signature: ''
      },
      edit: false
    }
  },
  created() {
    console.log(this.userinfo)
  },
  mounted() {
    document.getElementsByClassName('app-main')[0].style.backgroundColor = '#fafafc'
  },
  destroyed() {
    document.getElementsByClassName('app-main')[0].style.backgroundColor = '#f0f2f5'
  },
  methods: {
    modify() {
      this.edit = true
    },
    save() {
      this.edit = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/mixin.scss";

.user-container{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  width: 770px;
  height: 460px;
  overflow: hidden;
  @include borderShadow(8px);
  .header{
    text-align: center;
    padding: 5px 0;
    background-color: #e4e7ed;
    color: #474747;
  }
}
.user-left{
  position: relative;
  background-color: #f5f5f5;
  flex: 1;
  .userinfo{
    position: absolute;
    top: 40%;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translate(-50%, -50%);
    .avatar{
      position: relative;
      display: flex;
      width: 43px;
      justify-content: center;
      align-items: center;
      .img{
        width: 80px;
        height: 80px;
        box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
        border-radius: 50%;
      }
      .edit{
        position: absolute;
        display: inline-block;
        right: -22px;
        cursor: pointer;
        bottom: 0;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: #fff;
        color: #477bc9;
      }
    }
    .nickname{
      font-size: 16px;
      font-weight: bold;
      margin: 10px 0 5px;
    }
    .email{
      font-size: 14px;
      color: #8c8c8c;
    }
  }
}

.user-right{
  position: relative;
  flex: 1;
  padding: 10px;
  color: #6b6b6b;
  font-size: 16px;
  .topic{
    font-size: 16px;
    padding: 5px 0;
    border-bottom: 2px solid #f3f3f3;
  }
  .info{
    padding-left: 20px;
    .title{
      display: inline-block;
      margin: 15px 15px 0 10px;
      width: 80px;
      text-align: left;
    }
  }
  .btns{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 55px;
  }
}
.input{
  width: 60%;
}
::v-deep .el-input__inner{
  height: 30px;
}
::v-deep .el-form-item{
  margin-bottom: 0;
}
::v-deep .el-form-item__content{
  line-height: 20px;
}
</style>
